<template>
  <div @click="handleClick" v-show="show" class="to-top-container">
    top
  </div>
</template>

<script>
export default {
    data(){
        return {
            show:false,
        }
    },
    created(){
        this.$bus.$on('mainScroll',this.handleScroll);
    },
    destroyed(){
        this.$bus.$off("mainScroll",this.handleScroll);
    },
    methods:{
        //改变show值
        handleScroll(dom){
            if(!dom){
                this.show =false;
                return;
            }
            if(dom.scrollTop>1000){
                this.show = true;
            }
            else{
                this.show = false;
            }
        },
        handleClick(){
           this.$bus.$emit('setMainScroll',0); 
        }
    }
}
</script>

<style scoped lang="less">
@import '~@/styles/var.less';
.to-top-container{
    width: 50px;
    height: 50px;
    background-color: @primary;
    border-radius: 50%;
    position: fixed;
    z-index: 99;
    right: 50px;
    bottom: 50px;
    cursor: pointer;
    text-align: center;
    line-height: 50px;
    color: #fff;
}
</style>